import React from 'react';
import { Row, Col, Tooltip } from 'antd';
import { WeaTableNew } from 'comsMobx';
import { WeaLocaleProvider, WeaAvatar, WeaPopoverHrm } from 'ecCom';

const { WeaTable } = WeaTableNew;
const getLabel = WeaLocaleProvider.getLabel;

export default function SuggestionContent({ store, tableStore, voteid }) {
  const prefixCls = 'vote-result-suggestion';

  const getColumns = (columns) => {
    let newColumns = '';
    const { fileListMap } = store;
    newColumns = columns.map((column) => {
      let newColumn = column;
      if (newColumn.dataIndex !== 'otherinput') {
        newColumn.colSpan = 0;
        newColumn.display = 'false';
      } else {
        newColumn.render = (text, record, index) => (
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@z89ynr@${record.resourceid}_${index}`} className={`${prefixCls}-main-line`}>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@9zvlm6@${record.resourceid}_${index}`} span={3}>
                <WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@algnzk@${record.resourceid}_${index}`} userId={record.useranony === '1' ? -99 : record.resourceid} url={record.imageUrlspan || ''} style={{ width: 40, height: 40 }} name={record.resourceidspan} type={1} anonymous={record.useranony === '1'} />
              </Col>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@yuhy4r@${record.resourceid}_${index}`} span={4} className={`${prefixCls}-main-line-name`}>
                {record.useranony === '1' ? <span>{record.resourceidspan}</span> : (
                  <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@y92322`}>
                    <a
                      href={`javaScript:openhrm(${record.resourceid});`}
                      onClick={e => window.pointerXY(e)}
                      title={record.resourceidspan}
                    >{record.resourceidspan}</a>
                  </WeaPopoverHrm>
                )}
                <div>{record.useranony !== '1' && record.deptNamespan}</div>
              </Col>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3hg6lf@${record.resourceid}_${index}`} span={17} className={`${prefixCls}-main-line-content`}>
                <div className="desc" dangerouslySetInnerHTML={{ __html: record.otherinputspan }} />
                <div className="docs">
                  {
                    fileListMap[record.randomFieldId] && fileListMap[record.randomFieldId].map(({ fileSize, imagefileid, imagefilename }) => (
                      <div className="docs-item">
                        <i className="icon-coms-currency-Enclosure" />
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@h5ubmq@${record.resourceid}_${index}`} title={imagefilename}>
                          <a onClick={() =>
                            window.open(`/spa/document/index2file.jsp?imagefileId=${imagefileid}&votingId=${voteid}#/main/document/fileView`)}
                          >{imagefilename}</a>
                        </Tooltip>
                        <a className="docs-item-download" onClick={() => window.open(`/weaver/weaver.file.FileDownload?fileid=${imagefileid}&download=1&requestid=0&votingId=${voteid}&download=1`)}>{`【${getLabel(31156, '下载')}${fileSize}K】`}</a>
                      </div>
                    ))
                  }
                </div>
                <div className="time">{`${getLabel('511660', '提交时间：')} ${record.operatedatespan}`}</div>
              </Col>
            </Row>
          );
      }
      return newColumn;
    });
    return newColumns;
  };

  return (
    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@dry7x9`}
      comsWeaTableStore={tableStore}
      hasOrder
      showHeader={false}
      getColumns={getColumns}
    />
  );
}
